<template>
	<view class="box" style="height: 100vh;">
		<view class="topZhan" style="height: 88px;border-bottom: 2rpx solid rgba(0,0,0,0.1);"></view>
		<!-- 	<button @click="btn" class="dianji" style="position: fixed; z-index: 999;">
			点击按钮移动
		</button> -->
		<image src="/static/home/bgt.png" class="bgt" mode=""></image>
		<view class="moving-up" :class="{ active: isActive }">
			<text class="bolo">老师，您好！</text><br>
			<text class="tite">欢迎使用智小批批改系统</text>
		</view>
		<view class="botBox bot" :class="{ activeBox: isActiveBox }">
			<view>
				<view class="name bot" :class="{ activeName: isActiveName }">
					<view class="cheng">
						我们要怎么称呼您
					</view>
					<input type="text" placeholder="请输入姓名" v-model="form.name" @blur="blurName" class="inp" />
				</view>
				<view class="name bot" :class="{ activeNames: isActiveName }">
					<view class="cheng">
						请输入联系方式
					</view>
					<input type="number" placeholder="请输入联系方式" v-model="form.phon" @blur="blurName" class="inp" />
				</view>
				<view class="name bot" :class="{ activeCode: isActiveName }">
					<view class="cheng">
						请输入学校授权码
					</view>
					<input type="text" placeholder="请输入授权码" @blur="blurCode" v-model="form.code" class="inp" />
				</view>
				<view v-if="!isActiveBan" @click="chakanClass" class="btns bot f f-a-c f-j-c"
					:class="{ isActiveBtnsss: isActiveName }">
					查看班级
				</view>
			</view>
			<view class="banji bot" :class="{ isActiveBan: isActiveBan }">
				<view class="title">
					请选择您执教的班级
				</view>

				<!-- 动态渲染各个年级 -->
				<view v-for="(grade, gradeName) in gradeData" :key="gradeName" v-if="grade.length > 0">
					<view class="banBox">
						{{ gradeName }}
					</view>
					<view class="listObj f f-a-c f-w-w">
						<view v-for="(classItem, index) in grade" @click="selectClass(classItem, gradeName, index)"
							:key="classItem.classId" :class="{act: isClassSelected(classItem)}"
							class="item f f-a-c f-j-c">
							{{ classItem.className }}
						</view>
					</view>
				</view>
			</view>
			<view @click="goIndex" class="btns bot f f-a-c f-j-c" :class="{ isActiveBtns: isActiveBtns }">
				开启AI批改之旅
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 新增：按年级组织的班级数据
				gradeData: {
					'三年级': [],
					'四年级': [],
					'五年级': [],
					'六年级': []
				},
				// 新增：选中的班级数据
				selectedClasses: [],
				form: {
					name: '刘老师',
					code: '123',
					phon: '15005580992'
				},
				isActive: false,
				isActiveBox: false,
				isActiveName: false, //姓名
				isActiveCode: false, //学校码
				isActiveBan: false, //姓名
				isActiveBtns: false, //按钮
			}
		},
		onShow() {
			this.login()
		},
		onLoad() {
			setTimeout(() => {
				this.isActive = true;
			}, 200)
			setTimeout(() => {
				this.isActiveBox = true;
			}, 1000)
			setTimeout(() => {
				this.isActiveName = true;
			}, 1500)
			// setTimeout(() => {
			// 	this.isActiveCode = true;
			// }, 2000)
			// setTimeout(() => {
			// 	this.isActiveBan = true;
			// }, 2500)
			// setTimeout(() => {
			// 	this.isActiveBtns = true;
			// }, 3000)
		},
		methods: {
			// 新增：解析班级名称，提取年级信息
			parseGradeFromClassName(className) {
				// 将字符串转为小写处理
				const lowerClassName = className.toLowerCase();

				// 匹配各种格式的年级
				const gradeMap = {
					'三年': '三年级',
					'3年': '三年级',
					'四年': '四年级',
					'4年': '四年级',
					'五年': '五年级',
					'5年': '五年级',
					'六年': '六年级',
					'6年': '六年级'
				};

				for (let key in gradeMap) {
					if (lowerClassName.includes(key)) {
						return gradeMap[key];
					}
				}

				return null; // 如果无法匹配，返回null
			},

			// 新增：组织班级数据按年级分组
			organizeClassDataByGrade(classData) {
				// 重置年级数据
				this.gradeData = {
					'三年级': [],
					'四年级': [],
					'五年级': [],
					'六年级': []
				};

				classData.forEach(classItem => {
					const grade = this.parseGradeFromClassName(classItem.className);
					if (grade && this.gradeData[grade]) {
						this.gradeData[grade].push(classItem);
					}
				});
			},

			// 新增：选择班级的统一方法
			selectClass(classItem, grade, index) {
				const classKey = `${grade}_${index}`;
				const existingIndex = this.selectedClasses.findIndex(item =>
					item.classId === classItem.classId
				);

				if (existingIndex > -1) {
					// 如果已选中，则取消选中
					this.selectedClasses.splice(existingIndex, 1);
				} else {
					// 如果未选中，则添加到选中列表
					this.selectedClasses.push(classItem);
				}

				// 如果有选中的班级，显示按钮
				if (this.selectedClasses.length > 0) {
					setTimeout(() => {
						this.isActiveBtns = true;
					}, 0);
				} else {
					this.isActiveBtns = false;
				}
			},

			// 新增：检查班级是否被选中
			isClassSelected(classItem) {
				return this.selectedClasses.some(item => item.classId === classItem.classId);
			},

			// 微信授权登录
			login() {
				// uni.login({
				// 	provider: 'weixin', //使用微信登录
				// 	success: (loginRes) => {
				// 		console.log(loginRes.authResult, '111111');
				// 	},
				// 	fail: (err) => {
				// 		console.log(err, '2222222');
				// 	}
				// });
			},
			// 点击去首页
			async goIndex() {
				let n = await this.$api.batchAdd({
					teacherId: uni.getStorageSync('teacherId'),
					classIds: this.selectedClasses.map(item => item.classId)
				})
				if (n.code == '0000') {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
				// 可以在这里处理选中的班级数据
				console.log('选中的班级：', this.selectedClasses.map(item => item.classId));
			},
			// 新增：检查班级是否被选中
			isClassSelected(classItem) {
				return this.selectedClasses.some(item => item.classId === classItem.classId);
			},

			// blurName
			blurName(e) {
				setTimeout(() => {
					this.isActiveCode = true;
				}, 0)
			},
			blurCode(e) {
				// setTimeout(() => {
				// 	this.isActiveBan = true;
				// }, 0)
			},
			// 点击查看班级 
			async chakanClass() {

				if (!/^1[3-9]\d{9}$/.test(this.form.phon)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'error'
					});
					return
				}
				let n = await this.$api.miniappRegister({
					"phone": this.form.phon,
					"name": this.form.name,
					"authCode": this.form.code,
					"unionId": "123"
				})
				if (n.code == '0000') {
					uni.setStorageSync('teacherName', n.data.teacherName)
					uni.setStorageSync('phone', n.data.phone)
					uni.setStorageSync('schoolId', n.data.schoolId)
					uni.setStorageSync('teacherId', n.data.teacherId)
					uni.setStorageSync('token', n.data.accessToken)
					uni.setStorageSync('refreshToken', n.data.refreshToken)

					this.classInfo(n.data.schoolId)

				} else {
					this.$msg(n.info)
				}

			},
			async classInfo(str) {
				let n = await this.$api.schoolClassList({
					schoolId: str || '205253192831864832'
				})

				// 处理API返回的数据
				if (n.code === '0000' && n.data) {
					// 组织数据按年级分组
					this.organizeClassDataByGrade(n.data);
					this.isActiveBan = true;
				} else {
					this.$msg(n.info || '获取班级信息失败');
				}
			},
			btn() {
				console.log(111111);
				this.isActiveBan = true;
				// setTimeout(() => {
				// 	this.isActiveCode = true;
				// }, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.btns {
		width: 82%;
		height: 96rpx;
		background: linear-gradient(180deg, #03C28E 0%, #1EDDAC 100%);
		border-radius: 54rpx;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.banji {
		width: 82%;
		// position: fixed;
		height: 633rpx;
		// bottom: 0%;
		// background-color: pink;
		overflow-y: auto;

		.title {
			font-family: "SourceHanSansCN, SourceHanSansCN";
			font-weight: 400;
			font-size: 34rpx;
			color: #333333;
			margin-bottom: 15rpx;
		}

		.banBox {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 15rpx;
		}

		.listObj {
			width: 100%;

			.item {
				width: 160rpx;
				height: 56rpx;
				border: 2rpx solid #CCCCCC;
				border-radius: 20rpx;
				width: 32%;
				height: 56rpx;
				margin-right: 2%;
				margin-bottom: 20rpx;

				&.act {
					background: #CAF1C5;
					border: 2rpx solid transparent;
				}

				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}

	}

	.banji::-webkit-scrollbar {
		width: 0;
		/* 滚动条宽度 */
	}

	.botBox {
		position: fixed;
		left: 30rpx;
		box-sizing: border-box;
		height: 75%;
		border-radius: 60rpx;
		width: 90%;
		// left: 50%;
		bottom: 0;
		padding: 30rpx;
		// transform: translateX(50%);
		// right: 0;
		// bottom: -100%;
		background-color: #fff;
	}

	.botBox.activeBox {
		position: fixed;
		bottom: 0%;
	}



	.bot {
		position: fixed;
		bottom: -100%;
		transition: bottom 1.6s ease-out;
	}

	.box {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(180deg, #E4FAE1 0%, #FFFFFF 100%);

	}

	.bot.activeName {
		position: fixed;
		bottom: 65%;
	}

	.bot.activeNames {
		position: fixed;
		bottom: 55%;
	}

	.bot.activeCode {
		position: fixed;
		bottom: 45%;
	}

	.bot.isActiveBan {
		position: fixed;
		bottom: 3%;
		padding-bottom: 70rpx;
	}

	.bot.isActiveBtns {
		position: fixed;
		bottom: 3%;
	}

	.bot.isActiveBtnsss {
		position: fixed;
		bottom: 35%;
	}

	.name {
		// margin-bottom: 40rpx;
		width: 82%;
	}

	.cheng {
		font-family: "SourceHanSansCN, SourceHanSansCN";
		font-weight: 400;
		font-size: 34rpx;
		color: #333333;
		margin-bottom: 15rpx;
	}

	.inp {

		height: 70rpx;
		border-radius: 20rpx;
		border: 2rpx solid #CCCCCC;
		padding-left: 30rpx;
	}

	.bgt {
		position: fixed;
		right: 0;
		top: 13%;
		width: 494rpx;
		height: 407rpx;
	}

	/* 定义初始位置：在页面最下方（不可见） */
	.moving-up {
		position: fixed;
		left: 30rpx;
		right: 0;
		bottom: -100%;

		/* 初始在视口下方 */
		transition: bottom 1.6s ease-out;

		.bolo {
			font-size: 42rpx;
			color: #000;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 600;
		}

		.tite {
			color: #000;
			font-weight: 400;
			font-size: 34rpx;

		}
	}

	/* 加上 active 类后，自动移动到目标位置 */
	.moving-up.active {
		position: fixed;
		bottom: 80%;
		/* 目标位置 */
	}
</style>